{% extends "layouts/base.volt" %}

{% block title %}{{ get_title() }}{% endblock %}
{% block css %}
	{{ stylesheet_link('css/pages/reports.css') }}
{% endblock %}

{% block content %}

{{ partial("layouts/navbar", ['currentPage': 'answer']) }}

{{ partial("layouts/subnavbar", ['currentPage': 'answer/resports']) }}

<div class="main">
	
	<div class="main-inner">

	    <div class="container">
	    	
	     <div class="row">
	      	
	      	<div class="span12">
	      
	      	<div class="info-box">
               <div class="row-fluid stats-box">
                  <div class="span4">
                  	<div class="stats-box-title">注册用户</div>
                    <div class="stats-box-all-info"><i class="icon-user" style="color:#3366cc;"></i> {{ join }}</div>
                  </div>
                  
                  <div class="span4">
                    <div class="stats-box-title">完成用户</div>
                    <div class="stats-box-all-info"><i class="icon-pencil"  style="color:#F30"></i> {{ finished }}</div>
                  </div>
                  
                  <div class="span4">
                    <div class="stats-box-title">答题系统总正确率</div>
                    <div class="stats-box-all-info"><i class="icon-bar-chart" style="color:#3C3"></i> {{ ratio }}</div>
                    <div class="wrap-chart">
                    
                    </div>
                  </div>
               </div>
               
               
             </div>
               
               
         </div>
         </div>      
	      	
	  	  <!-- /row -->
	
	      <div class="row">
	      	
	      	<div class="span6">
	      		
	      		<div class="widget">
						
					<div class="widget-header">
						<i class="icon-star"></i>
						<h3>你的正确率</h3>
					</div> <!-- /widget-header -->
					
					<div class="widget-content" >
						<div class="stats-box-all-info"><i class="icon-legal" style="color:#F30"></i> {{ selfRatio }}</div>
					</div> <!-- /widget-content -->
						
				</div> <!-- /widget -->
				
	      		
	      		
	      		
		    </div> <!-- /span6 -->
	      	
	      	
	      	<div class="span6">
	      		
	      		<div class="widget">
							
					<div class="widget-header">
						<i class="icon-list-alt"></i>
						<h3>前十</h3>
					</div> <!-- /widget-header -->
					
					<div class="widget-content">
						<canvas id="bar-chart" class="chart-holder" height="250" width="538"></canvas>
					</div> <!-- /widget-content -->
				
				</div> <!-- /widget -->
									
		      </div> <!-- /span6 -->
	      	
	      </div> <!-- /row -->
	      
	      
	      
	      
			
	      
	      
	    </div> <!-- /container -->
	    
	</div> <!-- /main-inner -->
    
</div> <!-- /main -->
{% endblock %}

{% block js %}
<script src="js/base.js"></script>
<script>

    //var myPie = new Chart(document.getElementById("pie-chart").getContext("2d")).Pie(pieData);

    var barChartData = {
    	labels: {{ name }},
        
        datasets: [
				{
				    fillColor: "rgba(151,187,205,0.5)",
				    strokeColor: "rgba(151,187,205,1)",
				    data: {{ mark }}

				}
			]

    }

    var myLine = new Chart(document.getElementById("bar-chart").getContext("2d")).Bar(barChartData);
	
	</script>
{% endblock %}